<template>
  <div>
    <button @click="toggleLanguage">{{ currentLanguage }}</button>

    <p>{{ $t("welcome") }}</p>
    <router-link :to="{ name: 'about' }">{{ $t("about") }}</router-link>
    <router-link :to="{ name: 'contact' }">{{ $t("contact") }}</router-link>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      languages: ["en", "fr"], // 定义支持的语言列表
    };
  },
  methods: {
    // 按钮的文字也要随之切换用这个
    toggleLanguage() {
      const currentIndex = this.languages.indexOf(this.$i18n.locale);
      const nextIndex = (currentIndex + 1) % this.languages.length;
      this.$i18n.locale = this.languages[nextIndex];
    },
    // 按钮的文字不需要切换用这个
    changeLanguage() {
      if (this.$i18n.locale === "en") {
        this.$i18n.locale = "fr"; // 切换到法语
      } else {
        this.$i18n.locale = "en"; // 切换回英语
      }
    },
  },
  computed: {
    currentLanguage() {
      return this.$i18n.locale;
    },
  },
  components: {},
};
</script>

<style>
</style>